<script lang="ts" setup>
  import { ref } from "vue";

  const modalVisible = ref(false);

  const data = ref<any>([
    {
      name: "福华校区",
      address: "茂名市官渡街道福华一街71号3楼",
      phone: "19306687229",
      custom: false,
    },
    {
      name: "福华校区",
      address: "茂名市官渡街道福华一街71号3楼",
      phone: "19306687229",
      custom: false,
    },
    {
      name: "福华校区",
      address: "茂名市官渡街道福华一街71号3楼",
      phone: "19306687229",
      custom: true,
    },
  ]);
</script>

<template>
  <div>
    <umi-container :gap="16">
      <umi-container direction="horizonal" justify="between">
        <umi-space>
          <umi-button type="primary" size="large">新增门店</umi-button>
          <umi-button type="primary" size="large" @click="modalVisible = true">批量生成</umi-button>
        </umi-space>
        <umi-input-search placeholder="请输入门店名称"></umi-input-search>
      </umi-container>
      <umi-card :title="'门店' + (index + 1) + (item.custom ? '' : '（ID:24023）')" v-for="(item, index) in data">
        <template #extra>
          <umi-space>
            <umi-button type="danger" size="small" outline>移除</umi-button>
          </umi-space>
        </template>
        <umi-form>
          <umi-form-item label="门店名称">
            <umi-input value="福华校区"></umi-input>
          </umi-form-item>
          <umi-form-item label="门店地址">
            <umi-input value="茂名市官渡街道福华一街71号3楼"></umi-input>
          </umi-form-item>
          <umi-form-item label="联系电话">
            <umi-input value="19306687229"></umi-input>
          </umi-form-item>
        </umi-form>
      </umi-card>
    </umi-container>
    <umi-modal :width="800" v-model:visible="modalVisible" title="已报名活动的门店">
      <umi-container :gap="16">
        <umi-space align="center">
          <umi-input placeholder="请输入门店名称"></umi-input>
          <umi-button type="primary">搜索</umi-button>
          <umi-button type="primary">重置</umi-button>
        </umi-space>
        <umi-table :data="data" :row-selection="{ type: 'checkbox' }">
          <template #columns>
            <umi-table-column title="门店名称" data-index="name"></umi-table-column>
            <umi-table-column title="门店地址" data-index="address"></umi-table-column>
            <umi-table-column title="联系电话" data-index="phone" :width="140"></umi-table-column>
          </template>
        </umi-table>
      </umi-container>
    </umi-modal>
  </div>
</template>
